<script lang="ts">
    const props = $props();
    const colors = props.colors ?? [
        "#2d8cf0",
        "#19be6b",
        "#ff9900",
        "#ed4014",
        "#00b5ff",
        "#19c919",
        "#f9e31c",
        "#ea1a1a",
        "#9b1dea",
        "#00c2b1",
        "#ac7a33",
        "#1d35ea",
        "#8bc34a",
        "#f16b62",
        "#ea4ca3",
        "#0d94aa",
        "#febd79",
        "#5d4037",
        "#00bcd4",
        "#f06292",
        "#cddc39",
        "#607d8b",
        "#000000",
        "#ffffff",
    ];

    const onClick = (color: string) => {
        props.onChange?.({ hex: color, source: "hex" });
    };
</script>

<div class="cm-color-picker-recommend">
    <div class="cm-color-picker-recommend-container">
        {#each colors as color, index (index)}
            <!-- svelte-ignore a11y_no_static_element_interactions -->
            <!-- svelte-ignore a11y_click_events_have_key_events -->
            <div class="cm-color-picker-recommend-color" onclick={() => onClick(color)}>
                <div style={`background: ${color}`}></div>
            </div>
            {#if (index + 1) % 12 === 0}
                <br />
            {/if}
        {/each}
    </div>
</div>
